<template>
	<view>
		<view class="tab-clonpel">
			<van-tabs @click="actypon">
			  <van-tab title="全部" :name="null"></van-tab>
			  <van-tab title="奶油风" name="c7"></van-tab>
			  <van-tab title="原木风" name="c8"></van-tab>
			  <van-tab title="北欧极简" name="c1"></van-tab>
			  <van-tab title="现代简约" name="c2"></van-tab>
			  <van-tab title="美式田园" name="c3"></van-tab>
			  <van-tab title="日式" name="c4"></van-tab>
			  <van-tab title="新中式" name="c5"></van-tab>
			  <van-tab title="地中海" name="c6"></van-tab>
			</van-tabs>
			<van-tabs @click="aconest">
			  <van-tab title="全部" :name="null"></van-tab>
			  <van-tab title="60²" :name="{min:0,max:60,unit:'㎡'}"></van-tab>
			  <van-tab title="41-80²" :name="{min:41,max:80,unit:'㎡'}"></van-tab>
			  <van-tab title="81-100²" :name="{min:81,max:100,unit:'㎡'}"></van-tab>
			  <van-tab title="101-120²" :name="{min:101,max:120,unit:'㎡'}"></van-tab>
			  <van-tab title="120²以上"  :name="{min:120,max:2000,unit:'㎡'}"></van-tab>
			</van-tabs>
			<van-tabs @click="elemter">
			  <van-tab title="全部" :name="null"></van-tab>
			  <van-tab title="一居" name="S1"></van-tab>
			  <van-tab title="二居" name="S2"></van-tab>
			  <van-tab title="三居" name="S3"></van-tab>
			  <van-tab title="四居及以上" name="S4"></van-tab>
			</van-tabs>
		</view>
		<!-- 空白页 -->
		 <Blank v-if="list.length == 0" isedit="暂无数据哦~~"></Blank>
		<!-- 文章 -->
		<view class="cate-liket">
		<view class="cate-rietyon" v-for="(item,index) in list" :key="list">
			<image class="cate-comig" :src="item.images[0]" mode=""  @click="xtiaozkon(index)"></image>
			<view class="acty-caty" @click="xtiaozkon(index)">{{forminfodeet(item.category.channel)}}</view>
			<view class="caet-repd" @click="xtiaozkon(index)"> {{item.title}}</view>
			<span class="cate-spanon">{{item.favorites}}</span>
			<van-icon class="cate-icon" name="star-o" v-if="item.favoritesFlag == false" @click="aaaa(index)"/>
			<van-icon class="cate-icon" name="star" color="#ff7144" v-else @click="aaaa(index)"/>
        </view>
		</view>
		 <van-loading class="actoue" v-show="siopen" size="24px" type="spinner">加载中...</van-loading>
	</view>
</template>

<script>
	import Api from '@/http/api.js'
	import Blank from '@/package/components/blank.vue'
	import employeesConst from "@/employees/employees.js";
	const hireTypet = {};
	employeesConst.hireTydeet.forEach((item) => {
	  hireTypet[item.channel] = item.value;
	});
	export default{
		components:{ Blank },
		data(){
			return{
				siopen:false,
				list:[],
				onder:{
					cancel:"",
					articleId:''
				},
				info:'',
				q:{
					index:1,
					size:Number,
					type: null,
					spaceType: null,
					areaInfo: null
					  
				}
			}
		},
		onLoad() {
			this.loavier()
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.loavier();
		},
		//加载更多
		onReachBottom(){
			const that = this;
			this.siopen = true
			this.q.size = this.q.size+10
			console.log(this.q.size)
			setTimeout(async ()=>{
			let rec = await Api.clastey(this.q)
			this.list = rec.data.data
			 that.siopen = false
			},1000)
		},
		methods:{
			async loavier(){
				this.q.size = 10
				const res = await Api.clastey(this.q)
				this.list = res.data.data
			},
			// 收藏
			async aaaa(index){
				console.log(index)
				this.onder.articleId = this.list[index].articleId
				this.onder.cancel = this.list[index].favoritesFlag
				const ress = await Api.collect(this.onder)
			 	this.loavier()
			}, 
			// 跳转页面
			xtiaozkon(index){
				this.info = this.list[index].detailUrl
				uni.navigateTo({
					url: `/pages/components/out?id=`+ this.info,
				})
			},
			  // 渲染分类
			    forminfodeet(code){
			    return hireTypet[code];
			    },
				// tabs栏切换
				actypon(name){
					this.q.type = name.detail.name
					this.loavier()
				},
				aconest(name){
					this.q.areaInfo = name.detail.name
					this.loavier()
				},
				elemter(name){
					this.q.spaceType = name.detail.name
					this.loavier()
				}
		}
	}
</script>

<style lang="scss">
	.van-tabs{
		height: 32px !important;
		margin-bottom: 10px;
	}
	.van-tab--active{
  
	.van-ellipsis{
		border: 1px solid #E3E3E3;
		border-radius: 20px;
		padding-bottom: 10px;
		background-color: #FAFAFA;
	}

	}
	.van-tabs__line{
		background-color: rgba(0, 0, 0, 0) !important;
	}
	.van-ellipsis{
	font-size: 24rpx;
	line-height: 32px;
	height: 32px;
	}
// 文章列表
.cate-liket{
	margin-top: 35rpx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 0 32upx;
	background-color: #f5f5f5;
	.cate-rietyon{
		width: 48%;
		height: 235px;
		background-color: #FFFFFF;
		margin-bottom: 45upx;
		border-radius: 20rpx !important;
		padding-bottom: 10rpx;
	
	}
	.cate-comig{
		width: 100%;
		border-top-left-radius:20rpx;
		border-top-right-radius:20rpx;
		height: 70%;
	}
	.acty-caty{
		font-size: 24rpx;
		font-weight: 500;
		color: #ff7144;
		margin-left: 30upx;
	}
	.caet-repd{
		display: inline-block;
		font-size: 24rpx;
		font-weight: 500;
		margin-left: 30upx;
		margin-top: 15upx;
	}
	.cate-icon{
		display: inline-block;
		float: right;
		margin-right: 23rpx;
		transform: translateY(-15%);
	} 
	.cate-spanon{
		display: inline-block;
		transform: translateX(-15rpx); 
		font-weight: 500 !important;
		float: right;
		font-size: 24rpx;
		color: #8a8a8a;
	}
	}
	// 加载
	.actoue{
		margin-left: 40%;
	}
</style>